<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="description" content="同乡烩后台管理系统" />
		<title>同乡烩后台管理系统</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/list.css" />

	</head>
	<!-- 原材料添加 -->
	<body>
		<!-- 固定 -->
		<div class="main">
			<div class="main-left main-left2">
				<div class="main-left-header">同乡烩后台管理系统</div>
				<div class="main-left-nav">
					<div class="main-left-navs main-left-manage navs-active">
						<p class="nav-name">商品管理</p>
						<div class="navs  navs-first" onclick="window.location.href='dish-list.html'">菜品列表</div>
						<div class="navs" onclick="window.location.href='data-list.html'">原材料列表</div>
						<div class="navs" onclick="window.location.href='dish-add.html'">菜品添加</div>
						<div class="navs" onclick="window.location.href='data-add.html'">原材料添加</div>
					</div>




				</div>
			</div>
			<div class="main-left"></div>


			<!--操作  -->
			<div class="main-right">
				<div class="main-right-header"></div>
				<div class="main-right-navs">
					<a href="index-manage.html">管理首页</a><a class="split">/</a><a>原材料管理</a><a>/</a><a>原材料添加</a>
				</div>
				<div class="margin-right-container margin-right-container1">
					<div class="section  section2">
						<div class="margin-right-container-nav margin-right-container-nav2 " style="height: 16rem">
							<img id="imgPre" src="images/data02.jpg" />
						</div>
						<div class="margin-right-container-nav margin-right-container-nav2 margin-right-container-nav4">

							<div class="input-group">
								<input onchange="preImg(this.id,'imgPre');" name="imgOne" id="imgOne" type="file" />
							</div>
							<div class="input-group">
								<div class="input-group-left">原材料名称：</div>
								<input class="input-group-right" type="text" placeholder="原材料名称" />
								<div class="clear"></div>
							</div>
							<div class="input-group">
								<div class="input-group-left">分类</div>
								<select class="input-group-right">
									<option>肉类</option>
									<option>蔬菜类</option>

								</select>
								<div class="clear"></div>
							</div>
							<div class="input-group">
								<div class="input-group-left">价格：</div>
								<input class="input-group-right" type="text" placeholder="价格" />
								<div class="clear"></div>
							</div>
						</div>
						<div class="margin-right-container-nav5">
							<div class="sure">确认</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="margin-right-container">
					<div class="section section1">
						<div class="margin-right-container-nav">图片</div>
						<div class="margin-right-container-nav">原材料名称</div>

						<div class="margin-right-container-nav">价格</div>
						<div class="margin-right-container-nav">操作</div>
						<div class="clear"></div>
					</div>
					<div class="section  section2">
						<div class="margin-right-container-nav margin-right-container-nav2">
							<img src="images/data02.jpg" />
						</div>
						<div class="margin-right-container-nav margin-right-container-nav2">${name}</div>
						<div class="margin-right-container-nav margin-right-container-nav2">${price}</div>
						<div class="margin-right-container-nav margin-right-container-nav2"><a id="change">修改</a>/<a
								id="remove">删除</a></div>
						<div class="clear"></div>
					</div>
					<div class="section  section2">
						<div class="margin-right-container-nav margin-right-container-nav2">
							<img src="images/data02.jpg" />
						</div>
						<div class="margin-right-container-nav margin-right-container-nav2">原材料名称</div>

						<div class="margin-right-container-nav margin-right-container-nav2">价格</div>
						<div class="margin-right-container-nav margin-right-container-nav2"><a>修改</a>/<a>删除</a></div>
						<div class="clear"></div>
					</div>

				</div>
			</div>
			<div class="clear"></div>
		</div>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script>
			function getFileUrl(sourceId) {
				var url;
				if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE 
					url = document.getElementById(sourceId).value;
				} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox 
					url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
				} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome 
					url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
				}
				console.log(url)
				return url;
			}

			/** 
			 * 将本地图片 显示到浏览器上 
			 */
			function preImg(sourceId, targetId) {
				var url = getFileUrl(sourceId);
				var imgPre = document.getElementById(targetId);
				imgPre.src = url;
			}
			$(function() {

				var body_height = $(document).height();
				$(".main").css("height", body_height + "px");


			})
		</script>
	</body>
</html>
